<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8" />
        <link rel="stylesheet" href="/static/admin/css/font.css">
        <link rel="stylesheet" href="/static/admin/css/xadmin.css">
        <script type="text/javascript" src="/static/admin/lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="/static/admin/js/xadmin.js"></script>
        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!--[if lt IE 9]>
            <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
            <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <style>
        .img_delete {
            position:relative;top: -108px;right:-93px;
            width:14px;
        }
        .img img {
            width:100px;
            height:100px;
        }
    </style>
    <body>
        <div class="layui-fluid">
            <div class="layui-row">
                <form class="layui-form layui-table">
                    <input type="hidden" name="hr_id" value="{$house_id}"/>
                    <div class="layui-form-item">
                        <label for="ri_targetproduct" class="layui-form-label">
                            <span class="x-red">*</span>出租类型</label>
                        <div class="layui-input-inline">
                            <select name="ri_targetproduct" id="ri_targetproduct"  lay-filter="ri_targetproduct">
                                <option value="1">整租</option>
                                <option value="2">合租</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label for="ri_heating_mode" class="layui-form-label">
                            <span class="x-red">*</span>供暖方式</label>
                        <div class="layui-input-inline">
                            <select name="ri_heating_mode" id="ri_heating_mode"  lay-filter="ri_heating_mode">
                                <option value="1">集中供暖</option>
                                <option value="2">自采暖</option>
                                <option value="3">中央空调</option>
                                <option value="4">无暖气</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label for="ri_apartment_type" class="layui-form-label">
                            <span class="x-red">*</span>公寓类型
                        </label>
                        <div class="layui-input-inline">
                            <select name="ri_apartment_type" id="ri_apartment_type"  lay-filter="ri_apartment_type">
                                <option value="1">未出租</option>
                                <option value="2">已出租</option>
                            </select>
                        </div>
                    </div>



                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>冰箱
                        </label>
                        <div class="layui-input-inline">
                            <input type="radio" name="ri_refrigerator" value="1" title="有">
                            <input type="radio" name="ri_refrigerator" value="2" title="无" checked>
                        </div>

                        <label class="layui-form-label">
                            <span class="x-red">*</span>油烟机</label>
                        <div class="layui-input-inline">
                            <input type="radio" name="ri_range_hoods" value="1" title="有">
                            <input type="radio" name="ri_range_hoods" value="2" title="无" checked>
                        </div>
                    </div>


                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>燃气灶</label>
                        <div class="layui-input-inline">
                            <input type="radio" name="ri_gas_stove" value="1" title="有">
                            <input type="radio" name="ri_gas_stove" value="2" title="无" checked>
                        </div>

                        <label class="layui-form-label">
                            <span class="x-red">*</span>热水器</label>
                        <div class="layui-input-inline">
                            <input type="radio" name="ri_heater" value="1" title="有">
                            <input type="radio" name="ri_heater" value="2" title="无" checked>
                        </div>
                    </div>



                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>洗衣机</label>
                        <div class="layui-input-inline">
                            <input type="radio" name="ri_washing_machine" value="1" title="有">
                            <input type="radio" name="ri_washing_machine" value="2" title="无" checked>
                        </div>

                        <label class="layui-form-label">
                            <span class="x-red">*</span>衣柜</label>
                        <div class="layui-input-inline">
                            <input type="radio" name="ri_wardrobe" value="0" title="有">
                            <input type="radio" name="ri_wardrobe" value="1" title="无" checked>
                        </div>
                    </div>


                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>垃圾箱</label>
                        <div class="layui-input-inline">
                            <input type="radio" name="ri_trash" value="1" title="有">
                            <input type="radio" name="ri_trash" value="2" title="无" checked>
                        </div>

                        <label class="layui-form-label">
                            <span class="x-red">*</span>台灯</label>
                        <div class="layui-input-inline" >
                            <input type="radio" name="ri_desk_lamp" value="1" title="有">
                            <input type="radio" name="ri_desk_lamp" value="2" title="无" checked>
                        </div>
                    </div>


                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>房源户型图
                        </label>

                        <div class="layui-input-inline" style="margin-top:5px;">
                            <button type="button" class="layui-btn" id="home_photo_button">
                                <i class="layui-icon">&#xe67c;</i>上传图片
                            </button>
                        </div>
                    </div>

                    <div class="layui-form-item ri_home_photo_arr">
                        <label class="layui-form-label">
                            <span class="x-red"></span>
                        </label>
                        <input type="hidden" id="ri_home_photo" name="ri_home_photo" value=""/>
                    </div>


                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>房源公共区域照片
                        </label>

                        <div class="layui-input-inline" style="margin-top:5px;">
                            <button type="button" class="layui-btn" id="public_photo_button">
                                <i class="layui-icon">&#xe67c;</i>上传图片
                            </button>
                        </div>
                    </div>

                    <div class="layui-form-item ri_public_photo_arr">
                        <label class="layui-form-label">
                            <span class="x-red"></span>
                        </label>
                        <input type="hidden" id="ri_public_photo" name="ri_public_photo" value=""/>
                    </div>


                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>房源厨房照片
                        </label>

                        <div class="layui-input-inline" style="margin-top:5px;">
                            <button type="button" class="layui-btn" id="kitchen_photo_button">
                                <i class="layui-icon">&#xe67c;</i>上传图片
                            </button>
                        </div>
                    </div>

                    <div class="layui-form-item ri_kitchen_photo_arr">
                        <label class="layui-form-label">
                            <span class="x-red"></span>
                        </label>
                        <input type="hidden" id="ri_kitchen_photo" name="ri_kitchen_photo" value=""/>
                    </div>



                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>房源公卫照片
                        </label>

                        <div class="layui-input-inline" style="margin-top:5px;">
                            <button type="button" class="layui-btn" id="toilet_photo_button">
                                <i class="layui-icon">&#xe67c;</i>上传图片
                            </button>
                        </div>
                    </div>

                    <div class="layui-form-item ri_toilet_photo_arr">
                        <label class="layui-form-label">
                            <span class="x-red"></span>
                        </label>
                        <input type="hidden" id="ri_toilet_photo" name="ri_toilet_photo" value=""/>
                    </div>



                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="x-red">*</span>房源其他照片
                        </label>

                        <div class="layui-input-inline" style="margin-top:5px;">
                            <button type="button" class="layui-btn" id="other_photo_button">
                                <i class="layui-icon">&#xe67c;</i>上传图片
                            </button>
                        </div>
                    </div>

                    <div class="layui-form-item ri_other_photo_arr">
                        <label class="layui-form-label">
                            <span class="x-red"></span>
                        </label>
                        <input type="hidden" id="ri_other_photo" name="ri_other_photo" value=""/>
                    </div>


                    <div class="layui-form-item">
                        <label class="layui-form-label"></label>
                        <button class="layui-btn" lay-filter="add" lay-submit="">增加</button>
                    </div>
                </form>
            </div>
        </div>
        <script>
            layui.use(['form', 'layer','jquery','upload'],
            function() {
                $ = layui.jquery;
                var form = layui.form,
                layer = layui.layer;
                var upload = layui.upload;


                //监听提交
                form.on('submit(add)', function(data) {
                    $.ajax({
                        type: 'POST',
                        url: '/admin/HousingRes/housingRentalAdd',
                        async: false,
                        dataType: 'json',
                        data: {"data":data.field},
                        success: function (data) {
                            if (data.code==0) {
                                layer.msg(data.msg,{time: 1000, icon:6},function(){
                                    // 获得frame索引
                                    var index = parent.layer.getFrameIndex(window.name);
                                    //关闭当前frame
                                    parent.layer.close(index);
                                    //刷新父窗口
                                    xadmin.father_reload();
                                });

                            } else {
                                layer.msg(data.msg,{time: 2000, icon:5});
                            }
                        }
                    });
                    return false;
                });

                //房源户型图 图片上传
                var uploadInst = upload.render({
                    elem:'#home_photo_button' //绑定元素
                    ,url:'/admin/HousingRes/upload' //上传接口
                    ,method:''//上传类型 默认post
                    ,accept:'images' //允许上传的文件类型
                    ,field:'filename'
                    ,data:{type:'home_photo'}
                    ,done:function(res){

                        $imgnum = $('.ri_home_photo_arr').find("img").length
                        $num = $imgnum%6;

                        //上传完毕回调
                        label='';
                        label+='<label class="layui-form-label">';
                        label+='<span class="x-red"></span>';
                        label+='</label>';

                        html = '';
                        if ($num==0 && $imgnum!=0) {
                            html+='<div class="layui-input-inline img" style="margin-top:5px;margin-left:110px;">';
                        } else {
                            html+='<div class="layui-input-inline img" style="margin-top:5px;">';
                        }
                        html+='<img src="/'+res.data.imgUrl+'">';
                        html+='<div class="img_delete">';
                        html+='<a title="查看" onclick="member_del(this)" href="javascript:;">';
                        html+='<i class="layui-icon">&#x1006;</i>';
                        html+='</a></div></div>';


                        if ($num==0 && $imgnum!=0) {
                            $(".ri_home_photo_arr").append(label+html);
                        }else{
                            $(".ri_home_photo_arr").append(html);
                        }

                        home_photo_img = $("#ri_home_photo").val();

                        splits = home_photo_img.length==0 ? "" : ",";

                        home_photo_img+=splits+'/'+res.data.imgUrl;

                        $("#ri_home_photo").val(home_photo_img);
                    }
                    //,size: 50 //最大允许上传的文件大小
                    ,error:function(){
                        alert("失败");
                        //请求异常回调
                    }
                });

                //房源公共区域照片 图片上传
                var uploadInst1 = upload.render({
                    elem:'#public_photo_button' //绑定元素
                    ,url:'/admin/HousingRes/upload' //上传接口
                    ,method:''//上传类型 默认post
                    ,accept:'images' //允许上传的文件类型
                    ,field:'filename'
                    ,data:{type:'public_photo'}
                    ,before:function(obj){
                        //alert("aaaaaaaaa");return false;
                    }
                    ,done:function(res){
                        //上传完毕回调

                        $imgnum = $('.ri_public_photo_arr').find(" img").length
                        $num = $imgnum%6;

                        //上传完毕回调
                        label='';
                        label+='<label class="layui-form-label">';
                        label+='<span class="x-red"></span>';
                        label+='</label>';

                        html = '';
                        if ($num==0 && $imgnum!=0) {
                            html+='<div class="layui-input-inline img" style="margin-top:5px;margin-left:110px;">';
                        } else {
                            html+='<div class="layui-input-inline img" style="margin-top:5px;">';
                        }
                        html+='<img src="/'+res.data.imgUrl+'">';
                        html+='<div class="img_delete">';
                        html+='<a title="查看" onclick="member_del(this)" href="javascript:;">';
                        html+='<i class="layui-icon">&#x1006;</i>';
                        html+='</a></div></div>';

                        if ($num==0 && $imgnum!=0) {
                            $(".ri_public_photo_arr").append(label+html);
                        }else{
                            $(".ri_public_photo_arr").append(html);
                        }

                        home_photo_img = $("#ri_public_photo").val();

                        splits = home_photo_img.length==0 ? "" : ",";

                        home_photo_img+=splits+'/'+res.data.imgUrl;

                        $("#ri_public_photo").val(home_photo_img);
                    }
                    //,size: 50 //最大允许上传的文件大小
                    ,error:function(){
                        alert("失败");
                        //请求异常回调
                    }
                });

                //房源厨房照片 图片上传
                var uploadInst2 = upload.render({
                    elem:'#kitchen_photo_button' //绑定元素
                    ,url:'/admin/HousingRes/upload' //上传接口
                    ,method:''//上传类型 默认post
                    ,accept:'images' //允许上传的文件类型
                    ,field:'filename'
                    ,data:{type:'kitchen_photo'}
                    ,before:function(obj){
                        //alert("aaaaaaaaa");return false;
                    }
                    ,done:function(res){
                        //上传完毕回调
                        $imgnum = $('.ri_kitchen_photo_arr').find(" img").length
                        $num = $imgnum%6;

                        //上传完毕回调
                        label='';
                        label+='<label class="layui-form-label">';
                        label+='<span class="x-red"></span>';
                        label+='</label>';

                        html = '';
                        if ($num==0 && $imgnum!=0) {
                            html+='<div class="layui-input-inline img" style="margin-top:5px;margin-left:110px;">';
                        } else {
                            html+='<div class="layui-input-inline img" style="margin-top:5px;">';
                        }
                        html+='<img src="/'+res.data.imgUrl+'">';
                        html+='<div class="img_delete">';
                        html+='<a title="查看" onclick="member_del(this)" href="javascript:;">';
                        html+='<i class="layui-icon">&#x1006;</i>';
                        html+='</a></div></div>';


                        if ($num==0 && $imgnum!=0) {
                            $(".ri_kitchen_photo_arr").append(label+html);
                        }else{
                            $(".ri_kitchen_photo_arr").append(html);
                        }

                        home_photo_img = $("#ri_kitchen_photo").val();

                        splits = home_photo_img.length==0 ? "" : ",";

                        home_photo_img+=splits+'/'+res.data.imgUrl;

                        $("#ri_kitchen_photo").val(home_photo_img);
                    }
                    //,size: 50 //最大允许上传的文件大小
                    ,error:function(){
                        alert("失败");
                        //请求异常回调
                    }
                });

                //房源公卫照片 图片上传
                var uploadInst3 = upload.render({
                    elem:'#toilet_photo_button' //绑定元素
                    ,url:'/admin/HousingRes/upload' //上传接口
                    ,method:''//上传类型 默认post
                    ,accept:'images' //允许上传的文件类型
                    ,field:'filename'
                    ,data:{type:'toilet_photo'}
                    ,before:function(obj){
                        //alert("aaaaaaaaa");return false;
                    }
                    ,done:function(res){
                        //上传完毕回调
                        $imgnum = $('.ri_toilet_photo_arr').find(" img").length
                        $num = $imgnum%6;

                        //上传完毕回调
                        label='';
                        label+='<label class="layui-form-label">';
                        label+='<span class="x-red"></span>';
                        label+='</label>';

                        html = '';
                        if ($num==0 && $imgnum!=0) {
                            html+='<div class="layui-input-inline img" style="margin-top:5px;margin-left:110px;">';
                        } else {
                            html+='<div class="layui-input-inline img" style="margin-top:5px;">';
                        }
                        html+='<img src="/'+res.data.imgUrl+'">';
                        html+='<div class="img_delete">';
                        html+='<a title="查看" onclick="member_del(this)" href="javascript:;">';
                        html+='<i class="layui-icon">&#x1006;</i>';
                        html+='</a></div></div>';


                        if ($num==0 && $imgnum!=0) {
                            $(".ri_toilet_photo_arr").append(label+html);
                        }else{
                            $(".ri_toilet_photo_arr").append(html);
                        }

                        home_photo_img = $("#ri_toilet_photo").val();

                        splits = home_photo_img.length==0 ? "" : ",";

                        home_photo_img+=splits+'/'+res.data.imgUrl;

                        $("#ri_toilet_photo").val(home_photo_img);
                    }
                    //,size: 50 //最大允许上传的文件大小
                    ,error:function(){
                        alert("失败");
                        //请求异常回调
                    }
                });

                //房源其他照片 图片上传
                var uploadInst4 = upload.render({
                    elem:'#other_photo_button' //绑定元素
                    ,url:'/admin/HousingRes/upload' //上传接口
                    ,method:''//上传类型 默认post
                    ,accept:'images' //允许上传的文件类型
                    ,field:'filename'
                    ,data:{type:'other_photo'}
                    ,before:function(obj){
                        //alert("aaaaaaaaa");return false;
                    }
                    ,done:function(res){
                        //上传完毕回调
                        $imgnum = $('.ri_other_photo_arr').find("img").length
                        $num = $imgnum%6;

                        //上传完毕回调
                        label='';
                        label+='<label class="layui-form-label">';
                        label+='<span class="x-red"></span>';
                        label+='</label>';

                        html = '';
                        if ($num==0 && $imgnum!=0) {
                            html+='<div class="layui-input-inline img" style="margin-top:5px;margin-left:110px;">';
                        } else {
                            html+='<div class="layui-input-inline img" style="margin-top:5px;">';
                        }
                        html+='<img src="/'+res.data.imgUrl+'">';
                        html+='<div class="img_delete">';
                        html+='<a title="查看" onclick="member_del(this)" href="javascript:;">';
                        html+='<i class="layui-icon">&#x1006;</i>';
                        html+='</a></div></div>';


                        if ($num==0 && $imgnum!=0) {
                            $(".ri_other_photo_arr").append(label+html);
                        }else{
                            $(".ri_other_photo_arr").append(html);
                        }

                        home_photo_img = $("#ri_other_photo").val();

                        splits = home_photo_img.length==0 ? "" : ",";

                        home_photo_img+=splits+'/'+res.data.imgUrl;

                        $("#ri_other_photo").val(home_photo_img);
                    }
                    //,size: 50 //最大允许上传的文件大小
                    ,error:function(){
                        alert("失败");
                        //请求异常回调
                    }
                });
            });

            /*图片-删除*/
            function member_del(obj){
                id_param = $(obj).parents(".img").siblings("input").attr('id');
                layer.confirm('确认要删除吗？',function(index){
                    //发异步删除数据
                    img_src = $(obj).parents(".img").find("img").attr("src");
                    home_photo_img = $("#"+id_param).val();
                    img_arr= home_photo_img.split(",");
                    img_arr.splice($.inArray(img_src,img_arr),1);
                    var img_str = '';
                    $.each(img_arr,function(k,v){
                        img_str+=v+",";
                    });
                    img_str = img_str.substring(0,img_str.length-1);
                    $("#"+id_param).val(img_str);
                    $(obj).parents(".img").remove();
                    layer.msg('已删除!',{icon:1,time:1000});
                });
            }
        </script>
    </body>

</html>